<template>
  <el-container class="auth-container">
    <el-aside width="200px" class="fixed-tree">
      <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="search-tree">
      </el-input>
      <el-tree ref="tree" empty-text="请先创建职位" highlight-current class="tree" :data="role_list" :props="role_props" @node-click="handleNodeClick" :filter-node-method="filterNode"></el-tree>
    </el-aside>
    <el-main class="p0" @scroll.native="handleScroll">

      <div class="contain-box auth-box">
        <header :class="is_fixed ? 'fix-head' : ''">
          <el-select v-model="sys_id">
            <el-option v-for="item in sys_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <el-button type="primary" v-show="auth_list" class="save" size="middle" @click="save">保存</el-button>
        </header>

        <div class="main-box auth-list" v-if="auth_list">
          <el-card class="check-auth-list clear-float" v-for="(item, index) in auth_list.auth" :key="index">
            <div class="auth-manage-img-block">
              <img :src="item.logo" alt="logo">
            </div>
            <div class="auth-manage-checkbox">
              <!-- :default-expanded-keys="checked_list" -->
              <el-tree node-key="id" default-expand-all :default-checked-keys="checked_list" ref="tree" show-checkbox :data="item.children" :props="props"></el-tree>
            </div>
          </el-card>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import axios from "axios";
import { getAllRole, getSys, getAuthList, setAuth } from "@/api/auth_manage.js";
import "@/assets/css/auth.css";

export default {
  name: "auth-manage",
  data() {
    return {
      role_list: undefined,
      auth_list: undefined,
      sys_list: undefined,
      role_id: undefined,
      sys_id: undefined,
      props: {
        children: "children",
        value: "id",
        label: "label"
      },
      checked_list: undefined,
      filterText: undefined,
      role_props: {
        label: "name",
        children: "children",
        value: "id"
      },
      is_fixed: false
    };
  },
  mounted() {
    try {
      getAllRole().then(res => {
        this.role_list = res;
        if (this.role_list.length == 0) {
          this.$confirm("请先创建职位, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
        }
      });
      getSys().then(res => {
        this.sys_list = res;
        if (this.sys_list) {
          this.sys_id = this.sys_list[0].id;
        }
      });
    } catch (error) {
      this.$message.error(error);
    }
  },
  watch: {
    sys_id(newVal) {
      if (newVal && this.role_id) {
        getAuthList({ params: { roleId: this.role_id, sys: newVal } })
          .then(res => {
            this.auth_list = res.data.data;
            this.checked_list = this.auth_list.checks;
          })
          .catch(err => {
            this.$message.error(err);
          });
      }
    },
    role_id(newVal) {
      if (newVal && this.sys_id) {
        getAuthList({
          params: { roleId: newVal, sys: this.sys_id }
        })
          .then(res => {
            this.auth_list = res.data.data;
            this.checked_list = this.auth_list.checks;
          })
          .catch(err => {
            this.$message.error(err);
          });
      }
    },
    filterText(val) {
      this.$refs["tree"].filter(val);
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    handleNodeClick(data, node) {
      this.role_id = data.id;
    },
    save() {
      let arr = [];
      this.auth_list.auth.forEach((element, index) => {
        let str = "tree";
        // 半选中父节点
        arr = arr.concat(this.$refs[str][index].getHalfCheckedKeys());
        arr = arr.concat(this.$refs[str][index].getCheckedKeys());
      });
      setAuth({
        roleId: this.role_id,
        sys: this.sys_id,
        auth: arr
      })
        .then(res => {
          this.$message({
            type: "success",
            message: "保存成功!"
          });
          // hard 为true为全局刷新，false为刷新路由
          parent.postMessage({ action: "reload", hard: true }, "*");
        })
        .catch(err => {
          this.$message.error(err);
        });
      arr = null;
    },
    handleScroll(ev) {
      if (ev.target.scrollTop >= 30) {
        this.is_fixed = true;
      } else {
        this.is_fixed = false;
      }
    }
  }
};
</script>

<style>
.auth-container {
  height: calc(100vh - 32px);
}
.el-tree__empty-text {
  width: 100%;
}
</style>
